<template>
  <el-dialog
    title="批量导入"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="1000px"
    append-to-body
  >
    <el-steps :active="active" align-center>
      <el-step title="上传文件"></el-step>
      <el-step title="数据预览"></el-step>
    </el-steps>
    <div class="import-main" v-show="active == 1">
      <div class="upload">
        <div class="up_left">
          <img src="@/assets/images/upload.png" />
        </div>
        <div class="up_right">
          <p class="title">上传填好的数据表</p>
          <p class="tip">
            文件后缀名必须是xls或xlsx，文件大小不超过500KB，最多支持导入1000条数据
          </p>
          <el-upload
            :action="`${define.comUrl}/api/${URL}/Uploader`"
            :headers="{ Authorization: $store.getters.token }"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-change="handleChange"
            :file-list="fileList"
            accept=".xls,.xlsx"
            :before-upload="beforeUpload"
            class="upload-area"
          >
            <el-button type="text">上传文件</el-button>
          </el-upload>
        </div>
      </div>
      <div class="upload">
        <div class="up_left">
          <img src="@/assets/images/import.png" />
        </div>
        <div class="up_right">
          <p class="title">填写导入数据信息</p>
          <p class="tip">
            请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除
          </p>
          <el-button type="text" @click="templateDownload">下载模板</el-button>
        </div>
      </div>
    </div>
    <div class="import-main" v-show="active == 2">
      <JADP-table v-loading="listLoading" :data="list">
        <el-table-column
          v-for="(item, index) in columnList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template #default="{ row }">
            <el-input v-model="row[item.prop]"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="50">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              class="JADP-table-delBtn"
              @click="handleDel(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </JADP-table>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancle()" v-if="active == 1">取 消</el-button>
      <el-button @click="prev" v-if="active == 2">上一步</el-button>
      <el-button
        @click="next"
        type="primary"
        v-if="active < 3"
        :loading="btnLoading"
        >下一步
      </el-button>
      <!-- <el-button @click="cancle(true)" type="primary" v-else>关 闭</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    URL: {
      type: String,
    },
  },
  data() {
    return {
      visible: false,
      btnLoading: false,
      listLoading: false,
      fileName: "",
      fileList: [],
      active: 1,
      list: [],
      columnList: [],
    };
  },
  methods: {
    prev() {
      if (this.active == 1) return;
      this.active--;
    },
    next() {
      this.btnLoading = true;
      if (this.active == 2) {  
        if (!this.list.length)
          return this.$message({ message: "导入数据为空", type: "warning" });
        this.$emit("saveData");
      }
      if (this.active == 1) {
        if (!this.fileList.length || !this.fileName)
          return this.$message({ message: "请先上传文件", type: "warning" });
        // 上传文件预览
        this.$emit("ImportPreviewApi", this.fileName);
      }
      this.btnLoading = false;
    },
    cancle(isRefresh) {
      this.visible = false;
      // if (isRefresh) this.$emit("refresh");
    },
    init(columnList) {
      this.active = 1;
      this.fileList = [];
      this.fileName = "";
      this.columnList = columnList;
      this.visible = true;
    },
    handleDel(index) {
      this.list.splice(index, 1);
    },
    templateDownload() {
      this.$emit("TemplateDownload");
    },
    beforeUpload(file) {
      let isRightSize = file.size / 1024 < 500;
      if (!isRightSize) this.$message.error(`文件大小不能超过500KB`);
      return isRightSize;
    },
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`).catch(() => {});
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1);
    },
    handleSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.fileList = fileList.slice(-1);
        this.fileName = res.data.name;
      } else {
        this.fileList = fileList.filter((o) => o.uid != file.uid);
        this.$message({ message: res.msg, type: "error", duration: 1000 });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 20px 40px 2px !important;
}
.import-main {
  height: 500px;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
  .upload {
    display: flex;
    border: 1px solid #dcdfe6;
    margin-bottom: 25px;
    &.error-show {
      margin-top: 10px;
      margin-bottom: 15px;
      .up_left {
        height: 120px;
      }
      .up_right {
        padding-top: 20px;
        font-size: 16px;
        ::v-deep .el-link {
          font-size: 16px;
        }
      }
    }
    .up_left {
      width: 126px;
      height: 140px;
      background: #f9f9f9;
      text-align: center;
      padding-top: 20px;
      flex-shrink: 0;
      img {
        width: 80px;
        height: 80px;
      }
    }

    .up_right {
      color: #333;
      margin-left: 30px;
      font-size: 14px;
      padding-top: 30px;
      flex: 1;

      .title {
        font-size: 18px;
        font-weight: bold;
      }
      .tip {
        margin: 15px 0;
      }
    }
    .upload-area {
      display: flex;
      padding-right: 200px;
      ::v-deep {
        .el-upload {
          margin-right: 50px;
          flex-shrink: 0;
        }
        .el-upload-list {
          flex: 1;
        }
        .el-upload-list__item:first-child {
          margin-top: 5px;
        }
      }
    }
  }
  .success {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 110px;
    .success-title {
      margin: 20px 500px;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .contips {
    margin-bottom: 15px;
  }
}
</style>
